<script setup>
import CustomizeFormSelect from '@/views/flow/CutomizeForm/components/customizeOption/CustomizeFormSelect.vue';
import CustomCheckbox from '@/views/flow/CutomizeForm/components/customizeComponent/CustomCheckbox.vue'
import CustomRadio from '@/views/flow/CutomizeForm/components/customizeComponent/CustomRadio.vue'
import CustomDatePicker from '@/views/flow/CutomizeForm/components/customizeComponent/CustomDatePicker.vue'
import CustomInput from '@/views/flow/CutomizeForm/components/customizeComponent/CustomInput.vue'
import CustomSelect from '@/views/flow/CutomizeForm/components/customizeComponent/CustomSelect.vue'
import CustomFile from '@/views/flow/CutomizeForm/components/customizeComponent/CustomFile.vue'
import avatarUpload from '@/views/user/components/avatarUpload.vue';
import xmlFileUpload from '@/views/flow/flowList/components/xmlFileUpload.vue';
import verificationCode from './formComponents/verificationCode.vue'
const components = shallowRef({ CustomizeFormSelect, avatarUpload, xmlFileUpload, CustomCheckbox, CustomRadio, CustomDatePicker, CustomInput, CustomSelect, CustomFile, verificationCode })
const props = defineProps({
  optionList: {
    type: Array,
    default: []
  },
  optionData: {
    type: Object,
    default: {}
  },
  optionRuleList: {
    type: Object,
    default: {}
  }
})
const emit = defineEmits(['updateFormData'])

const optionList = ref([])

const formData = ref({})
const formRef = ref(null)
//创建表单数据
watch(() => props.optionList, (val) => {
  if (!val || !val.length) return
  val.forEach(item => {
    formData.value[item.data.prop] = ''
  });
  //自定义组件浅响应
  optionList.value = val.map(item => {
    if (Object.keys(components.value).includes(item.component)) {
      item.component = components.value[item.component]
    }
    return item
  })
}, {
  immediate: true,
})

//数据回显
watch(() => props.optionData, (val) => {
  if (!Object.keys(val).length || !Object.keys(formData.value).length) return
  Object.keys(formData.value).forEach(item => {
    formData.value[item] = val[item]
  })
},
  {
    immediate: true
  })
watch(() => formData.value, (val) => {
  emit('updateFormData', val)
}, {
  immediate: true,
  deep: true
})

const validForm = (fn) => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      console.log('%c [  ]-72', 'font-size:13px; background:pink; color:#bf2c9f;', '校验通过')
      fn()
    } else {
      console.log('%c [  ]-66', 'font-size:13px; background:pink; color:#bf2c9f;', '校验不通过')
    }
  })
}

const resetForm = () => {
  formRef.value.resetFields()
}
//暴露方法给父组件
defineExpose({
  resetForm,
  validForm
})

</script>


<template>
  <div class="form-container">
    <el-form ref="formRef" :model="formData" :rules="props.optionRuleList">
      <el-form-item v-for="(item, index) in optionList" :key="index" v-bind="item.data"
        :label-width="item.width || '80px'" :required="item.required">
        <component :is="item.component" v-bind="item.$attrs" v-model="formData[item.data.prop]"></component>
      </el-form-item>
    </el-form>
  </div>
</template>


<style lang="scss" scoped></style>